<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="shortcut icon" href="../../share/img/logo.png">
		<link rel="stylesheet" href="../../share/css/main.css">
		<script src="../../share/js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../share/js/util.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body class="p-10">
		<h1>入门</h1>
		<div class="row">
			<div class="col-1">
				<section>
					<h3>变量</h3>
					<button onclick="test11()">var 声明</button>
					<button onclick="test12()">let 声明</button>
					<button onclick="test13()">const 声明</button>
					<button onclick="test16()">模板字符串</button>
					<button onclick="test17()">对象定义简写</button>
				</section>
				<section>
					<h3>原始数据类型</h3>
					<button onclick="test21()">Number</button>
					<button onclick="test22()">String</button>
					<button onclick="test23()">Boolean</button>
					<button onclick="test24()">null</button>
					<button onclick="test25()">undefined</button>
				</section>
				<section>
					<h3>运算符</h3>
					<button onclick="test31()">算术运算</button>
					<button onclick="test32()">逻辑运算</button>
					<button onclick="test33()">比较运算</button>
					<button onclick="test34()">其它运算</button>
				</section>
				<section>
					<h3>解构赋值</h3>
					<button onclick="test14()">数组结构</button>
					<button onclick="test15()">对象结构</button>
				</section>
			</div>
			<div class="col-1">
			</div>
			<div class="col-1">
				<ul id="log" class="d-list mt-10"></ul>
			</div>
		</div>
		<script>
			function test11() {
				var a = 10;
				console.log("声明时同时赋值: ", a);

				var b;
				console.log("声明时不赋值: ", b);

				var c, d = 15;
				console.log("同时声明多个变量: ", c, d);

				console.log("变量提升: ", e);
				var e = 11;
				console.log("提升后赋值: ", e);
			}

			function test12() {
				let i = 0;
				var ary = [];

				// ary[0] = function() {
				// 	console.log(i);
				// }
				// i++;
				// ary[1] = function() {
				// 	console.log(i);
				// }

				// i++;
				// ary[2] = function() {
				// 	console.log(i);
				// }

				for (let j = 0; j < 3; j++) {
					ary[j] = function() {
						console.log(j);
					}
				}

				ary[0]();
				ary[1]();
				ary[2]();
				console.log(ary[0] === ary[1]);
			}

			function test13() {
				const PI = 3.1415926;
				const SUN = "太阳";
				console.log(PI, SUN);
			}

			function test14() {
				var foods = ["苹果", "香蕉", "桔子"];
				var [a, b, c] = foods;
				console.log(a, b, c);
			}

			function test15() {
				// 1. 变量和对象的属性同名
				var user = {
					name: "Tom",
					age: 20,
					show() {
						console.log(this.name)
					}
				};
				var {
					name,
					age,
					show
				} = user;
				console.log("变量和对象的属性同名");
				console.log(name, age);
				show.call(user);

				// 2. 变量名和对象的属性名称不一致
				var {
					name: a,
					age: b
				} = user;
				console.log("变量名和对象的属性名称不一致");
				console.log(a, b);

				// 3. 变量已经存在
				var c, d;
				// 错误方式赋值
				// {
				// 	name: c,
				// 	age: d
				// } = user;
				// 正确方式
				({
					name: c,
					age: d
				} = user);
				console.log(c, d);

				// 循环内结构赋值
				var pets = [{
					name: "Dog",
					age: 3
				}, {
					name: "Cat",
					age: 2
				}];
				var e, f;
				for (let i = 0; i < pets.length; i++) {
					({
						name: e,
						age: f
					} = pets[i]);
					console.log(e, f);
					// console.log(pets[i].name, pets[i].age);
				}
			}

			function test16() {
				var user = {
					name: "Tom",
					age: 20
				};
				console.log(`My name is ${user.name}, I'm ${user.age} year's old.`);
			}

			function test17() {
				// 属性简写
				var name = "Tom",
					age = 20;

				var tom = {
					name: name,
					age: age
				};
				console.log("非简写:", tom.name, tom.age);

				name = "Jack";
				age = 25;
				var jack = {
					name,
					age
				};
				console.log("简写: ", jack.name, jack.age);

				// 方法简写
				var util = {
					add: function() {
						console.log("非简写方法");
					},
					add2() {
						console.log("简写方法")
					}
				}
				util.add();
				util.add2();
			}

			function test21() {

			}

			function test22() {

			}

			function test23() {

			}

			function test24() {

			}

			function test25() {

			}

			function test31() {

			}

			function test32() {

			}

			function test33() {

			}

			function test34() {

			}
		</script>
	</body>
</html>
